<template>
	<view class="newindex">
		
		<view class="navbar">
			<view :style="{ height: sysHeight + 'px' }"></view>
			<view class="navbarH acea-row row-middle">
				<view class="address icon-dingwei bold"></view>
				<view class="city">{{ cityname }}</view>
				<view class="themecolor look-city" @click="urlClick(`/pages/home/city-toggle`)">查看城市</view>
			</view>
		</view>
		<view :style="{ height: (sysHeight+50) + 'px' }"></view>
		
		<view class="swiper-nav">
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in bannerlist" :key="index" @click="urlClick(item.link)">
					<image class="imgwh" :src="item.img" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="acea-row row-between-wrapper pt30 themecolor">
				<view class="acea-row row-middle">
					<view class="vline"></view>
					<view class="fs36 bold ml20">报名入口</view>
				</view>
				<view class="acea-row row-middle" @click="urlClick(`/pages/home/application?city_id=${city_id}&latitude=${latitude}&longitude=${longitude}`)">
					<text class="fs26">点击更多</text>
					<text class="iconfont icon-xiangyou1 fs36 ml10"></text>
				</view>
			</view>
		</view>
		<view class="acea-row row-middle tabnav">
			<scroll-view scroll-x="true" class="scroll-nav">
				<block v-for="(item,index) in stagelist" :key="index">
					<view class="item" :class="tabindex==item.stage_id?'on':''" @click="tabclick(item.stage_id)">{{ item.title }}</view>
				</block>
			</scroll-view>
		</view>
		<view class="list p30">
			<block v-for="(item,index) in inletlist" :key="index">
				<view class="item bgwhite mb30" @click.stop="urlClick(`/pages/home/application-details?id=${item.huodong_id}`)">
					<view class="picture">
						<image class="imgwh" :src="item.image" mode=""></image>
						<text class="tips-left fs30">{{ item.stageName }}</text>
						<!-- <text class="num">报名人数: {{ item.xiangqingData.baomingCount }}人</text> -->
					</view>
					<view class="p30">
						<view class="acea-row row-between-wrapper">
							<view class="title bold fs32 line1">{{ item.title }}</view>
							<view class="baoming fs26 acea-row row-middle row-center">{{ item.xiangqingData.statusName }}</view>
						</view>
						<view class="subtitle fs26 fc333 line2 mt10">
							{{ item.synopsis }}
						</view>
						<view class="acea-row row-between mt20">
							<view>	
								<view class="word-wrap" style="width: 400rpx;">
									<text class="iconfont icon-wxbdingwei fc222 fs32"></text>
									<text class="ml10 fs28 fc333">{{ item.baoming_to_address }}</text>
								</view>
								<view class="daohang acea-row row-middle row-center themecolor mt10" @click.stop="openlocation(item)">
									<text class="iconfont icon-daohang"></text>
									<text class="fs24 ml10">导航</text>
								</view>
							</view>
							<view class="acea-row row-column row-center row-middle">
								<view class="detail acea-row row-middle row-center fcwhite fs26">查看详情</view>
								<view class="callphone acea-row row-middle row-center" @click.stop="bohao(item.huodong_phone)">
									<image src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/callphone-icon.png" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="inletlist.length==0">
				<pagenone title="暂无数据~"></pagenone>
			</block>
		</view>
		
		<view class="advice p30 mt30 bgwhite">
			<view class="acea-row row-between-wrapper themecolor">
				<view class="acea-row row-middle">
					<view class="vline"></view>
					<view class="fs36 bold ml20">比赛资讯</view>
				</view>
				<view class="acea-row row-middle" @click="urlClick(`/pages/home/news`)">
					<text class="fs26">点击更多</text>
					<text class="iconfont icon-xiangyou1 fs36 ml10"></text>
				</view>
			</view>
			<block v-for="(item,index) in articlelist" :key="index">
				<view class="item acea-row" @click.stop="urlClick(`/pages/home/news-details?id=${item.id}`)">
					<view class="pic">
						<image class="imgwh" :src="item.image_input[0]" mode=""></image>
					</view>
					<view class="ml20" style="width: 500rpx;">
						<view class="line2 fs32 bold fc333" style="min-height: 80rpx;">{{ item.title }}</view>
						<view class="acea-row row-right">
							<view class="see fs24 acea-row row-middle row-center">点击查看</view>
						</view>
					</view>
				</view>
			</block>
			<view class='loadingicon acea-row row-center-wrapper fs26'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		
		<tabbar path="/pages/index/newindex"></tabbar>
		
	</view>
</template>

<script>
	const app = getApp();
	import{
		newindex,
		getarticle,	
		inletList,
		provinceList,
	} from '@/api/api.js'
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import{
		stageList
	} from '@/api/other.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import tabbar from '../../components/tabbar.vue' 
	import pagenone from '../../components/pagenone.vue'
	export default {
		components:{
			tabbar,
			pagenone
		},
		data() {
			return {
				sysHeight: sysHeight,
				loadend: false,
				loading: false,
				loadTitle: this.$t(`加载更多`),
				page:1,
				limit:10,
				tabindex: 1,
				bannerlist:[],
				articlelist:[],
				address:'',
				cityname:'',
				inletlist:[],
				city_id:'',
				latitude: '',
				longitude: '',
				stagelist:[],
				
			};
		},
		onShow(){
			if( app.globalData.cityname ){
				this.cityname = app.globalData.cityname;
				this.getstageList();
				this.getcity();
				this.clearArticle();
				// this.getArticle();
				this.getdata();
			}else{
				this.getstageList();
				this.getlocation();
				this.getdata();
				this.clearArticle();
			}
		},
		onLoad(){
			
			// this.getstageList();
			this.getlocation();
			// if( !this.cityname ){
			// 	this.clearArticle();
			// 	this.getArticle();
			// 	this.getdata();
			// }
		},
		methods:{
			bohao(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getstageList(){
				stageList({ xiangmu_id:1 }).then(res=>{
					this.stagelist = res.data.list;
				})
			},
			getinletList(){
				uni.showLoading({
					title: '加载中'
				})
				let that =this;
				let data = {
					page: 1,
					limit: 10,
					city_id: that.city_id,
					latitude: that.latitude,
					longitude: that.longitude,
					stage_id: that.tabindex,
				}
				inletList(data).then(res=>{
					uni.hideLoading()
					that.inletlist = res.data.data.list;
				}).catch((err)=>{
					uni.hideLoading()
				})
			},
			getcity(){
				let that = this;
				provinceList().then(res=>{
					let list = res.data.data;
					list.map((item,index)=>{
						item.child.map((child,j)=>{
							if( child.name == that.cityname ){
								that.city_id = child.city_id;
								that.getinletList();
							}
						})
					})
				})
			},
			openlocation(item){
				this.$util.openlocation(item.latitude,item.longitude);
			},
			getlocation(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.latitude = res.latitude;
						that.longitude = res.longitude
						let str = `key=QTZBZ-YI2K6-WIASN-ETZ3P-ORLJV-6BFDS&location=${res.latitude},${res.longitude}`
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?' + str,
							data: {},
							method: 'get',
							success: ress => {
								// console.log(ress);
								that.cityname = ress.data.result.address_component.city;
								app.globalData.cityname = ress.data.result.address_component.city;
								that.getcity();
							},
							fail: () => {},
						})
					}
				});
			},
			clearArticle(){
				this.articlelist = [];
				this.loadend = false;
				this.loading = false;
				this.page = 1;
				this.getArticle();
			},
			getArticle(){
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				getarticle({ page:that.page, limit:that.limit }).then(res=>{
					let list = res.data;
					let articlelist = that.$util.SplitArray(list, that.articlelist);
					let loadend = list.length < that.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
					that.$set(that, 'articlelist', articlelist);
					that.$set(that, 'page', that.page + 1);
				}).catch(err=>{
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			},
			getdata(){
				newindex().then(res=>{
					this.bannerlist = res.data.banner;
				})
			},
			tabclick(val){
				this.tabindex = val;
				this.getinletList();
			},
			urlClick(url){
				uni.navigateTo({
					url: url
				})
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
					// #ifdef H5
					let url = location.href;
					if (this.$store.state.app.uid) {
						url =
							url.indexOf("?") === -1 ?
							url + "?spread=" + this.$store.state.app.uid :
							url + "&spread=" + this.$store.state.app.uid;
					}
					if (that.$wechat.isWeixin()) {
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: url,
							imgUrl: data.img,
						};
						that.$wechat.wechatEvevt(
							["updateAppMessageShareData", "updateTimelineShareData"],
							configAppMessage
						);
					}
					// #endif
				});
			},
		},
		onReachBottom(){
			this.getArticle();
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: "/pages/index/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
		// #endif
	}
</script>

<style lang="scss">
	page{ background-color: #ffffff !important; }
	.newindex{
		
		.navbar{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;
			z-index: 999;
			
			.navbarH{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.icon-dingwei{
					font-size: 40rpx;
					color: #000;
				}
				.city{
					color: #222222;
					font-size: 32rpx;
				}
				.look-city{
					font-size: 26rpx;
					text-decoration: underline;
					margin-left: 10rpx;
				}
				
			}
		}
		
		.callphone{
			width: 80rpx;
			height: 80rpx;
			background-color: #6252DF;
			border-radius: 50%;
			margin-top: 10rpx;
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
		
		.swiper-nav{
			width: 100%;
			padding: 30rpx;
			background-color: #ffffff;
			
			.swiper{
				width: 690rpx;
				height: 420rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}
			.swiper-item{
				width: 100%;
				height: 100%;
			}
		}
		
		.tabnav{
			background-color: #f2f2f2;
			padding: 30rpx 30rpx 0 30rpx;
			
			.scroll-nav{
				white-space: nowrap;
			}
			
			.item~.item{
				margin-left: 50rpx;
			}
			
			.item{
				color: #666666;
				font-size: 32rpx;
				line-height: 50rpx;
				display: inline-block;
				
				&.on{
					color: #6252DF;
					border-bottom: 4rpx solid #6252DF;
				}
			}
		}
		
		.list{
			background: #F4F4F4;
			
			.item{
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				
				.picture{
					width: 100%;
					height: 344rpx;
					position: relative;
					
					.tips-left{
						min-width: 144rpx;
						max-width: 200rpx;
						height: 64rpx;
						border-radius: 20rpx 0 20rpx 0;
						background: #6252DF;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						text-align: center;
						line-height: 64rpx;
						color: #ffffff;
						padding: 0 10rpx;
						display: inline;
					}
					.num{
						width: 200rpx;
						height: 60rpx;
						border-radius: 154rpx;
						background: rgba(0, 0, 0, 0.6);
						text-align: center;
						line-height: 60rpx;
						color: #ffffff;
						font-size: 22rpx;
						position: absolute;
						bottom: 30rpx;
						left: 30rpx;
					}
				}
				
				.title{
					width: 458rpx;
				}
				.baoming{
					width: 140rpx;
					height: 58rpx;
					border-radius: 16rpx;
					background: rgba(51, 102, 255, 0.3);
					color: #3366FF;
				}
				.subtitle{
					width: 458rpx;
				}
				.daohang{
					width: 144rpx;
					height: 60rpx;
					border-radius: 68rpx;
					background: rgba(98, 82, 223, 0.3);
				}
				.detail{
					width: 200rpx;
					height: 60rpx;
					border-radius: 68rpx;
					background: #6252DF;
				}

			}
			
		}

		.advice{
			width: 100%;
			
			.item{
				width: 100%;
				border-bottom: 1rpx solid #D8D8D8;
				padding: 30rpx 10rpx;
				
				.pic{
					width: 144rpx;
					height: 144rpx;
				}
				
				.see{
					width: 200rpx;
					height: 56rpx;
					border-radius: 28rpx;
					background: rgba(98, 82, 223, 0.1);
					color: #6252DF;
				}
			}
		}
		
	}
</style>
